<template>
	<div><div>    
		<button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>

    <p><button v-on:click="greet">Greet</button></p>

    <p>
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
    </p>

    <p><button v-on:click="warn('提交.', $event)">Submit</button></p>

	</div></div>
</template>
<script>
export default {
  data () { 
    return {
      counter: 0,
      name: 'Vue.js'
    } 
  },
  methods: {
    greet: function (event) {      
      alert('Hello '+ this.name + '! ') // `this` 指当前 Vue 实例
      if (event) {// `event` 是原生 DOM 事件
          alert(event.target.tagName)
      }
    },
    say: function (message) {
      alert(message)
    },
    warn: function (message, event) {
      // 现在我们可以访问原生事件对象
      if (event) event.preventDefault()
      alert(message)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active {
  width: 100px;
  height: 100px;
  background: green;
}
.text-danger {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
